<template>
  <div class="page_root">
    <var-card>
      <var-button primary @click="addRow">新增</var-button>
      <var-table :data="mainList">
        <var-table-column prop="id" label="ID" width="100" />
        <var-table-column prop="name" label="标题">
          <template #default="scope">
            <router-link
              :to="{ path: '/bloglist', query: { label: scope.row.id } }"
            >
              {{ scope.row.name }}
            </router-link>
          </template>
        </var-table-column>
        <var-table-column prop="name" label="数量">
          <template #default="scope">
            <router-link
              :to="{ path: '/bloglist', query: { label: scope.row.id } }"
            >
              {{ scope.row.nums }}篇文章
            </router-link>
          </template>
        </var-table-column>
        <var-table-column prop="updatedAt" label="修改时间" width="200" />
        <var-table-column prop="createdAt" label="创建时间" width="200" />
        <var-table-column label="操作" width="100">
          <template #default="scope">
            <var-button type="text" size="small" @click="editRow(scope.row)">
              编辑
            </var-button>
            <var-popconfirm
              title="确定删除吗？"
              @onConfirm="deleteRow(scope.row)"
            >
              <template #reference="">
                <var-button type="text" size="small"> 删除 </var-button>
              </template>
            </var-popconfirm>
          </template>
        </var-table-column>
      </var-table>
    </var-card>
    <FixedDialog
      :title="'id' in row ? '修改标签' : '新增标签'"
      :visiable="'name' in row"
      @cancel="row = {}"
      @confirm="dialogSubmit"
    >
      <template #default="">
        <var-form labvar-width="100px" labvar-position="left">
          <var-form-item label="标签名">
            <var-input v-model="row.name" />
          </var-form-item>
        </var-form>
      </template>
    </FixedDialog>
  </div>
</template>
<script>
import * as http from "./api";
export default {
  components: {},
  data() {
    return {
      mainList: [],
      total: 0,
      row: {},
    };
  },
  mounted() {
    this.getMainList();
  },
  methods: {
    test() {
      console.log(1);
    },
    async getMainList() {
      try {
        const res = await http.selectLabelList();
        if (res.code != 200) {
          // throw new Error('')
        }
        this.mainList = res.data.list.map((item) => {
          return {
            ...item,
            createdAt: this.$formatDate(item.createdAt),
            updatedAt: this.$formatDate(item.updatedAt),
          };
        });
        this.total = res.data.total;
      } catch (e) {
        console.log(e);
        this.$message.error(e);
      }
    },
    addRow() {
      this.row = {
        name: "",
      };
    },
    previewRow(row) {
      this.newLabel = true;
    },
    editRow(row) {
      this.row = { ...row };
    },
    async deleteRow(row) {
      try {
        const res = await http.dropLabel(row);
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }
        this.getMainList();
      } catch (e) {
        console.log(e);
        this.$message.error("删除失败，请稍后重试");
      }
    },
    async dialogSubmit() {
      const value = this.row.name.trim();
      if (!value) {
        this.$message.error("标签名不能为空");
        return false;
      }
      let res;
      try {
        if (this.row.id) {
          res = await http.updateLabel(this.row);
        } else {
          res = await http.insertLabel({
            name: value,
          });
        }
      } catch (e) {
        console.log(e);
        this.$message.error(e.msg);
        return false;
      }
      this.row = {};
      this.getMainList();
    },
  },
};
</script>
<style lang="scss" scoped>
.page_root {
  padding: 10px;
}
</style>
